<?php
/**
 * 相关文章展示组件
 * 支持网格布局和时间线布局，可自定义样式和内容
 */
$configKey = isset($configKey) ? $configKey : 'relation-article';
$texts = [];
// 默认配置
$defaultConfig = [
    'section_id' => $configKey,
    'section_pretitle' => '相关阅读',
    'section_title' => '相关信息',
    'section_subtitle' => '浏览我们为不同行业客户完成的项目案例，了解我们的专业能力',
    'layout' => 'grid', // timeline 或 grid
    'timeline_direction' => 'vertical', // vertical 或 horizontal
    'bg_color' => 'white',
    'accent_color' => 'blue-600',
    'show_years' => true,
    'columns' => '3', // 网格布局列数(1-4)
    'gap' => 'gap-8',
    'show_more' => true,
    'more_url' => '/cases',
    'more_text' => '查看更多相关信息',
    'button_icon' => 'fa-chevron-right',
    'texts' => $texts,
    'items' => [
        [
            'id' => 1002,
            'title' => '元宇宙：虚拟与现实的融合',
            'cover' => 'https://picsum.photos/seed/tech3/600/400',
            'category' => '科技创新',
            'publish_date' => '2023-11-10',
            'read_time' => '6 分钟',
            'url' => '#' // 文章链接
        ],
        [
            'id' => 1003,
            'title' => '量子计算：计算能力的新突破',
            'cover' => 'https://picsum.photos/seed/tech4/600/400',
            'category' => '科技创新',
            'publish_date' => '2023-11-05',
            'read_time' => '7 分钟',
            'url' => '#'
        ],
        [
            'id' => 1004,
            'title' => 'Web3.0：互联网的下一个时代',
            'cover' => 'https://picsum.photos/seed/tech5/600/400',
            'category' => '科技创新',
            'publish_date' => '2023-10-28',
            'read_time' => '5 分钟',
            'url' => '#'
        ]
    ]
];

// 合并配置
$data = array_merge($defaultConfig, $pageConfig['components'][$configKey] ?? []);

// 处理背景样式
$bgClass = "bg-{$data['bg_color']}";

// 处理网格列数
$columnClasses = [
    '1' => 'grid-cols-1',
    '2' => 'grid-cols-1 md:grid-cols-2',
    '3' => 'grid-cols-1 md:grid-cols-3',
    '4' => 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4'
];
$columnClass = $columnClasses[$data['columns']] ?? $columnClasses['3'];

// 处理强调色
$accentColorClass = "text-{$data['accent_color']}";
?>

<!-- 相关文章 -->
<section id="<?php echo htmlspecialchars($data['section_id']); ?>" class="py-16">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <!-- 区域标题 -->
        <div class="text-center max-w-3xl mx-auto mb-12">
            <?php if (!empty($data['section_pretitle'])): ?>
                <span class="inline-block text-sm font-semibold <?php echo $accentColorClass; ?> uppercase tracking-wider mb-2">
                    <?php echo htmlspecialchars($data['section_pretitle']); ?>
                </span>
            <?php endif; ?>
            
            <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
                <?php echo htmlspecialchars($data['section_title']); ?>
            </h2>
            
            <?php if (!empty($data['section_subtitle'])): ?>
                <p class="text-lg text-gray-600">
                    <?php echo htmlspecialchars($data['section_subtitle']); ?>
                </p>
            <?php endif; ?>
        </div>

        <!-- 内容展示区 - 网格布局 -->
        <?php if ($data['layout'] === 'grid'): ?>
            <div class="grid <?php echo $columnClass; ?> <?php echo $data['gap']; ?>">
                <?php foreach ($data['items'] as $related): ?>
                    <a href="<?php echo htmlspecialchars($related['url'] ?? '#'); ?>" class="block group">
                        <div class="relative rounded-xl overflow-hidden mb-4 aspect-video">
                            <img 
                                src="<?php echo htmlspecialchars($related['cover']); ?>"
                                alt="<?php echo htmlspecialchars($related['title']); ?>"
                                class="w-full h-full object-cover transform transition-transform duration-500 group-hover:scale-105"
                            >
                        </div>
                        <span class="text-xs text-gray-500 mb-1 inline-block">
                            <?php echo htmlspecialchars($related['category']); ?> · <?php echo htmlspecialchars($related['publish_date']); ?>
                        </span>
                        <h3 class="font-bold text-lg mb-2 text-gray-800 group-hover:<?php echo $accentColorClass; ?> transition-colors line-clamp-2">
                            <?php echo htmlspecialchars($related['title']); ?>
                        </h3>
                        <div class="flex items-center text-gray-500 text-sm">
                            <i class="fa fa-clock-o mr-1"></i>
                            <?php echo htmlspecialchars($related['read_time']); ?>
                        </div>
                    </a>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>

        <!-- 内容展示区 - 时间线布局 -->
        <?php if ($data['layout'] === 'timeline'): ?>
            <?php if ($data['timeline_direction'] === 'vertical'): ?>
                <div class="relative">
                    <!-- 时间线中轴线 -->
                    <div class="absolute left-0 md:left-1/2 top-0 bottom-0 w-px bg-gray-200 transform md:translate-x-px"></div>
                    
                    <div class="space-y-12">
                        <?php foreach ($data['items'] as $index => $item): ?>
                            <?php 
                            $isEven = $index % 2 === 0;
                            $timelineSide = $isEven ? 'md:text-right md:pr-12 md:ml-auto' : 'md:pl-12';
                            $dotPosition = $isEven ? 'md:left-1/2 -translate-x-full' : 'md:left-1/2 translate-x-0';
                            ?>
                            
                            <div class="relative">
                                <!-- 时间点 -->
                                <div class="absolute top-0 w-4 h-4 rounded-full bg-<?php echo $data['accent_color']; ?> <?php echo $dotPosition; ?> transform -translate-y-1/2"></div>
                                
                                <!-- 内容 -->
                                <div class="<?php echo $timelineSide; ?> max-w-lg">
                                    <?php if (!empty($item['publish_date']) && $data['show_years']): ?>
                                        <time class="inline-block text-sm <?php echo $accentColorClass; ?> font-medium mb-2">
                                            <?php echo htmlspecialchars($item['publish_date']); ?>
                                        </time>
                                    <?php endif; ?>
                                    
                                    <a href="<?php echo htmlspecialchars($item['url'] ?? '#'); ?>" class="group">
                                        <h3 class="text-xl font-bold mb-2 text-gray-900 group-hover:<?php echo $accentColorClass; ?> transition-colors">
                                            <?php echo htmlspecialchars($item['title']); ?>
                                        </h3>
                                        
                                        <div class="mb-3 rounded-lg overflow-hidden">
                                            <img 
                                                src="<?php echo htmlspecialchars($item['cover']); ?>"
                                                alt="<?php echo htmlspecialchars($item['title']); ?>"
                                                class="w-full h-auto transform transition-transform duration-500 group-hover:scale-105"
                                            >
                                        </div>
                                        
                                        <p class="text-sm text-gray-500 mb-2">
                                            <?php echo htmlspecialchars($item['category']); ?> · 
                                            <i class="fa fa-clock-o mr-1"></i> <?php echo htmlspecialchars($item['read_time']); ?>
                                        </p>
                                    </a>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                </div>
            <?php else: ?>
                <!-- 水平时间线布局实现 -->
                <div class="relative pb-8 overflow-x-auto">
                    <div class="absolute bottom-0 left-0 right-0 h-px bg-gray-200"></div>
                    
                    <div class="flex space-x-8 min-w-max pb-8">
                        <?php foreach ($data['items'] as $item): ?>
                            <div class="relative flex flex-col items-center max-w-xs">
                                <!-- 时间点 -->
                                <div class="w-4 h-4 rounded-full bg-<?php echo $data['accent_color']; ?> mb-4"></div>
                                
                                <!-- 内容 -->
                                <a href="<?php echo htmlspecialchars($item['url'] ?? '#'); ?>" class="group text-center">
                                    <?php if (!empty($item['publish_date']) && $data['show_years']): ?>
                                        <time class="inline-block text-sm <?php echo $accentColorClass; ?> font-medium mb-2">
                                            <?php echo htmlspecialchars($item['publish_date']); ?>
                                        </time>
                                    <?php endif; ?>
                                    
                                    <h3 class="text-lg font-bold mb-2 text-gray-900 group-hover:<?php echo $accentColorClass; ?> transition-colors">
                                        <?php echo htmlspecialchars($item['title']); ?>
                                    </h3>
                                    
                                    <div class="mb-3 rounded-lg overflow-hidden">
                                        <img 
                                            src="<?php echo htmlspecialchars($item['cover']); ?>"
                                            alt="<?php echo htmlspecialchars($item['title']); ?>"
                                            class="w-full h-auto transform transition-transform duration-500 group-hover:scale-105"
                                        >
                                    </div>
                                    
                                    <p class="text-sm text-gray-500">
                                        <?php echo htmlspecialchars($item['category']); ?> · 
                                        <i class="fa fa-clock-o mr-1"></i> <?php echo htmlspecialchars($item['read_time']); ?>
                                    </p>
                                </a>
                            </div>
                        <?php endforeach; ?>
                    </div>
                </div>
            <?php endif; ?>
        <?php endif; ?>

        <!-- 查看更多按钮 -->
        <?php if ($data['show_more'] && !empty($data['more_url'])): ?>
            <div class="text-center mt-12">
                <a href="<?php echo htmlspecialchars($data['more_url']); ?>" class="inline-flex items-center px-6 py-3 border border-<?php echo $data['accent_color']; ?> text-<?php echo $data['accent_color']; ?> hover:bg-<?php echo $data['accent_color']; ?> hover:text-white font-medium rounded-lg transition-all duration-300">
                    <?php echo htmlspecialchars($data['more_text']); ?>
                    <?php if (!empty($data['button_icon'])): ?>
                        <i class="fa <?php echo htmlspecialchars($data['button_icon']); ?> ml-2"></i>
                    <?php endif; ?>
                </a>
            </div>
        <?php endif; ?>
    </div>
</section>
